<!DOCTYPE html>
<meta charset="utf-8">
<style>
label {
  font-size: 20px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.baseline {
  fill: none;
  stroke: black;
  stroke-width: 1px;
  stroke-dasharray:5,5;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
.setting {
  width:700;
}

.chart {
  width:450;
  display: inline-block;
  overflow: hidden;
}

.overlay {
  fill: none;
  pointer-events: all;
}

.focus circle {
  fill:steelblue;
  stroke: steelblue;
}

</style>
<head>
  <link rel="stylesheet" type="text/css" href="js/main.css"> 
</head>
<body>
<div id="react" class="setting">
</div>
<div class="chart" id="chart0"></div>
<div class="chart" id="chart1"></div>
<div class="chart" id="chart2"></div>
<div class="chart" id="chart3"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/bundle.js"></script>
<script>


// d3.tsv("data.tsv", type, function(error, data) {
//   if (error) throw error;

//   x.domain(d3.extent(data, function(d) { return d.date; }));
//   y.domain(d3.extent(data, function(d) { return d.close; }));

//   svg.append("g")
//       .attr("class", "x axis")
//       .attr("transform", "translate(0," + height + ")")
//       .call(xAxis);

//   svg.append("g")
//       .attr("class", "y axis")
//       .call(yAxis)
//     .append("text")
//       .attr("transform", "rotate(-90)")
//       .attr("y", 6)
//       .attr("dy", ".71em")
//       .style("text-anchor", "end")
//       .text("Price ($)");

//   svg.append("path")
//       .datum(data)
//       .attr("class", "line")
//       .attr("d", line);
// });

function type(d) {
  d.date = formatDate.parse(d.date);
  d.close = +d.close;
  return d;
}
</script>


